<!DOCTYPE html>
<html>
<head>
    <title>专家信息综合管理</title>
    <#include "../../include/head-file.ftl"/>
    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.2/css/index.css">
    <style>
        .ms-admin-edit-container {
            height: calc(100vh - 60px);
        }
        
        .ms-container {
            height: calc(100% - 50px);
            padding: 0;
            overflow-y: auto;
            background: transparent;
        }
        
        .ms-header {
            padding: 0 20px;
            margin-bottom: 10px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 4px rgba(0,0,0,.08);
        }
        
        .ms-header-left {
            display: flex;
            align-items: center;
        }
        
        .ms-header-title {
            font-size: 20px;
            font-weight: 600;
            color: #303133;
            margin: 0;
            position: relative;
            padding-left: 16px;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .ms-header-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 22px;
            background: linear-gradient(to bottom, #409EFF, #67c23a);
            border-radius: 2px;
        }
        
        .ms-header-subtitle {
            color: #909399;
            font-size: 14px;
            font-weight: normal;
            margin-left: 15px;
            font-style: italic;
            opacity: 0.9;
        }
        
        .content-wrapper {
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            position: relative;
            padding-left: 12px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 15px;
            border-left: 3px solid #409EFF;
            display: flex;
            align-items: center;
        }
        
        .section-icon {
            margin-right: 6px;
            color: #409EFF;
            font-size: 18px;
        }
        
        .edit-form {
            margin-bottom: 30px;
        }
        
        .form-actions {
            margin-top: 20px;
            text-align: right;
        }
        
        .related-tables {
            margin-top: 30px;
        }
        
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        /* 新增样式 - 表格优化 */
        .data-table {
            width: 100%;
        }
        
        .data-table .el-input {
            width: 100%;
        }
        
        /* 分组样式 */
        .group-title {
            background-color: #f5f7fa;
            padding: 10px;
            font-weight: bold;
            color: #606266;
            border-bottom: 1px solid #EBEEF5;
            margin-top: 15px;
        }
        
        /* 增加卡片内边距 */
        .el-card__body {
            padding: 15px;
        }
        
        /* 滚动表格 */
        .table-container {
            overflow-x: auto;
        }
        
        /* 折叠面板样式 */
        .el-collapse-item__header {
            font-size: 16px;
            font-weight: 500;
        }
        
        .el-collapse-item__content {
            padding-top: 15px;
        }
        
        /* 添加内联表单样式 */
        .inline-form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .inline-form .el-form-item {
            margin-bottom: 10px;
            width: calc(50% - 5px);
        }
        
        .inline-form .el-form-item__label {
            padding: 0;
            line-height: 1.2;
            margin-bottom: 5px;
        }
        
        /* 表格样式调整 */
        .el-table .cell {
            padding: 15px !important;
        }
        
        /* 折叠面板样式 */
        .el-collapse-item__content {
            padding: 20px;
        }
        
        .project-item, .company-item {
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #EBEEF5;
        }
        
        .project-item:last-child, .company-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
<div id="app" class="ms-admin-edit-container" v-cloak>
    <el-header class="ms-header" height="50px">
        <div class="ms-header-left">
            <h1 class="ms-header-title">
                <i class="el-icon-edit-outline" style="margin-right: 8px; font-size: 22px;"></i>
                专家综合信息管理
            </h1>
            <span class="ms-header-subtitle">便捷高效的专家数据关联编辑系统</span>
        </div>
        <div style="padding-right: 0;">
            <el-button-group>
                <el-button @click="returnToIndex">返回</el-button>
                <el-button type="primary" @click="saveAllChanges">保存更改</el-button>
            </el-button-group>
        </div>
    </el-header>
    
    <el-main class="ms-container">
        <div class="content-wrapper">
            <!-- 使用折叠面板优化布局 -->
            <el-collapse v-model="activeNames">
                <!-- 专家基本信息编辑 -->
                <el-collapse-item title="专家基本信息" name="expert">
                    <template slot="title">
                        <div class="section-title">
                            <i class="el-icon-user section-icon"></i>专家基本信息
                        </div>
                    </template>
                    
                    <el-form :model="expertForm" ref="expertForm" label-width="120px" class="edit-form" v-loading="loading">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="专家编号">
                                    <el-input v-model="expertForm.expertCode" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="姓名">
                                    <el-input v-model="expertForm.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="性别">
                                    <el-select v-model="expertForm.gender" placeholder="请选择">
                                        <el-option label="男" value="男"></el-option>
                                        <el-option label="女" value="女"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="年龄">
                                    <el-input-number v-model="expertForm.age" :min="0" :max="120"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="职称/头衔">
                                    <el-input v-model="expertForm.title"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="最高学历">
                                    <el-select v-model="expertForm.highestEducation" placeholder="请选择">
                                        <el-option label="博士" value="博士"></el-option>
                                        <el-option label="硕士" value="硕士"></el-option>
                                        <el-option label="本科" value="本科"></el-option>
                                        <el-option label="其他" value="其他"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="一级学科">
                                    <el-input v-model="expertForm.firstLevelDiscipline"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="二级学科">
                                    <el-input v-model="expertForm.secondLevelDiscipline"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="校内/外标识">
                                    <el-select v-model="expertForm.insideOutside" placeholder="请选择">
                                        <el-option label="校内" value="校内"></el-option>
                                        <el-option label="校外" value="校外"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="所属学院">
                                    <el-input v-model="expertForm.college"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="知识产权持有量">
                                    <el-input v-model="expertForm.ipOwnership"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="社会职务">
                                    <el-input v-model="expertForm.socialPositions"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="纵向项目数">
                                    <el-input v-model="expertForm.verticalProjects"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="横向项目数">
                                    <el-input v-model="expertForm.horizontalProjects"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="研究方向关键词">
                                    <el-input v-model="expertForm.researchKeywords" type="textarea" :rows="2" placeholder="请输入3-5个关键词"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="代表性成果类型">
                                    <el-input v-model="expertForm.achievementType"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-form-item label="联系方式">
                            <el-input v-model="expertForm.contact"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="备注">
                            <el-input v-model="expertForm.remarks" type="textarea" :rows="3"></el-input>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                
                <!-- 关联项目 -->
                <el-collapse-item title="关联项目" name="projects">
                    <template slot="title">
                        <div class="section-title">
                            <i class="el-icon-folder section-icon"></i>关联项目
                        </div>
                    </template>
                    
                    <div v-for="(project, index) in projectsList" :key="'project-' + index" class="project-item">
                        <el-divider content-position="left">项目 {{index+1}}</el-divider>
                        <el-form label-width="120px" class="edit-form">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="项目编号">
                                        <el-input v-model="project.projectCode" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="项目名称">
                                        <el-input v-model="project.projectName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属部门">
                                        <el-input v-model="project.department"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="负责人编号">
                                        <el-input v-model="project.leaderCode"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="项目类型">
                                        <el-input v-model="project.projectType"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="技术成熟度">
                                        <el-input v-model="project.techMaturity"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="参与专家">
                                        <el-input v-model="project.participantExperts"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="市场化阶段">
                                        <el-input v-model="project.marketStage"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="转化方式">
                                        <el-input v-model="project.transformationMode"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="核心技术关键词">
                                        <el-input v-model="project.coreTechKeywords"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="应用行业">
                                        <el-input v-model="project.applicationIndustry"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="预算需求">
                                        <el-input v-model="project.budget"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="合作企业意向">
                                        <el-input v-model="project.cooperationTendency"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系方式">
                                        <el-input v-model="project.contact"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-form-item label="知识产权详情">
                                <el-input v-model="project.ipDetails"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="备注">
                                <el-input v-model="project.remarks" type="textarea" :rows="2"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
                
                <!-- 关联企业 -->
                <el-collapse-item title="关联企业" name="companies">
                    <template slot="title">
                        <div class="section-title">
                            <i class="el-icon-office-building section-icon"></i>关联企业
                        </div>
                    </template>
                    
                    <div v-for="(company, index) in companiesList" :key="'company-' + index" class="company-item">
                        <el-divider content-position="left">企业 {{index+1}}</el-divider>
                        <el-form label-width="120px" class="edit-form">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="企业编号">
                                        <el-input v-model="company.companyCode" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="企业名称">
                                        <el-input v-model="company.companyName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="企业类型">
                                        <el-input v-model="company.companyType"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="所属行业(一级)">
                                        <el-input v-model="company.industryPrimary"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属行业(二级)">
                                        <el-input v-model="company.industrySecondary"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="注册地址">
                                        <el-input v-model="company.registrationAddress"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="联系人">
                                        <el-input v-model="company.contactPerson"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="联系方式">
                                        <el-input v-model="company.contactInfo"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="合作状态">
                                        <el-input v-model="company.cooperationStatus"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="主营业务关键词">
                                        <el-input v-model="company.businessKeywords"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="合作需求类型">
                                        <el-input v-model="company.cooperationType"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="需求技术领域">
                                        <el-input v-model="company.requiredTechField"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="需求专家职称">
                                        <el-input v-model="company.requiredExpertTitle"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="对接专家编号">
                                        <el-input v-model="company.matchedExpertCodes"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="合作历史项目">
                                        <el-input v-model="company.cooperationHistory"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <el-form-item label="备注">
                                <el-input v-model="company.remarks" type="textarea" :rows="2"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </el-main>
</div>

<script>
    var app = new _Vue({
        el: '#app',
        data: function() {
            return {
                loading: false,
                activeNames: ['expert', 'projects', 'companies'], // 默认展开所有面板
                expertCode: '',
                expertForm: {
                    expertCode: '',
                    name: '',
                    gender: '',
                    age: 0,
                    title: '',
                    highestEducation: '',
                    firstLevelDiscipline: '',
                    secondLevelDiscipline: '',
                    insideOutside: '',
                    college: '',
                    ipOwnership: '',
                    socialPositions: '',
                    researchKeywords: '',
                    achievementType: '',
                    verticalProjects: '',
                    horizontalProjects: '',
                    contact: '',
                    remarks: ''
                },
                projectsList: [],
                companiesList: []
            };
        },
        created: function() {
            this.expertCode = this.getUrlParam('expertCode');
            if (this.expertCode) {
                this.loadExpertData();
            }
        },
        mounted: function() {
            // 确保Vue完全加载
            console.log('Vue实例已挂载');
        },
        methods: {
            // 获取URL参数
            getUrlParam: function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },
            
            // 加载专家数据
            loadExpertData: function() {
                var that = this;
                that.loading = true;
                
                var url = ms.manager + "/expertmanage/relation/getRelationsForEdit";
                ms.http.get(url, {
                    expertCode: that.expertCode
                }).then(function (res) {
                    that.loading = false;
                    if (res.result) {
                        // 设置专家表单数据
                        that.expertForm = res.data.expert;
                        
                        // 处理关联数据
                        var relations = res.data.relations || [];
                        var projectsMap = {};
                        var companiesMap = {};
                        
                        relations.forEach(function(relation) {
                            if (relation.project) {
                                projectsMap[relation.project.projectCode] = relation.project;
                            }
                            
                            if (relation.company) {
                                companiesMap[relation.company.companyCode] = relation.company;
                            }
                        });
                        
                        // 转换为数组
                        that.projectsList = Object.values(projectsMap);
                        that.companiesList = Object.values(companiesMap);
                    } else {
                        that.$message.error(res.msg || '获取专家数据失败');
                    }
                }).catch(function(err) {
                    that.loading = false;
                    that.$message.error('加载数据失败：' + err);
                });
            },
            
            // 返回列表页
            returnToIndex: function() {
                location.href = ms.manager + "/expertmanage/relation/index";
            },
            
            // 保存所有更改
            saveAllChanges: function() {
                var that = this;
                that.loading = true;
                
                // 准备提交数据
                var editData = {
                    expert: that.expertForm,
                    projects: that.projectsList,
                    companies: that.companiesList
                };
                
                var url = ms.manager + "/expertmanage/relation/saveRelations";
                
                // 正确设置Content-Type为application/json
                ms.http.post(url, JSON.stringify(editData), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    that.loading = false;
                    if (res.result) {
                        that.$message.success('保存成功');
                        // 重新加载数据确保显示最新状态
                        that.loadExpertData();
                    } else {
                        that.$message.error(res.msg || '保存失败');
                    }
                }).catch(function(err) {
                    that.loading = false;
                    that.$message.error('保存失败：' + err);
                });
            }
        }
    });
</script>
</body>
</html> 